<template>
  <div id="app">
    <p>{{ site }}</p>
  </div>
</template>

<script>

  var vm ={
        name: "computedSetter",
      el: '#app',
      data() {
        return {
          name1: 'Google',
          url: 'http://www.google.com'
        }
      },
      computed: {
        site: {
          // getter
          get: function () {
            return this.name1 + ' ' + this.url
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.name1 = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    }
  export default vm;

  /**
   *下面这些玩意在  html 中直接导入vue的时候能用, 这种用脚手架的是不能用的
   * */

    // 调用 setter， vm.name 和 vm.url 也会被对应更新
    // vm.site = '菜鸟教程 http://www.runoob.com';//这个就是setter了,因为  vm可以直接指向计算属性的值
    // document.write('name: ' + vm.name1);
    // document.write('<br>');
    // document.write('url: ' + vm.url);

</script>
<!--
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
-->
<style scoped>

</style>
